<template>
	<view class="body">
		<view class="header">
			<infomationVue :query="query" @changDelete="changDelete" @openRemark="openRemark"></infomationVue>
			<view class="bottom">
				<view class="row mb">
					<view class="left">
						门店
					</view>
					<view class="right">
						<image :src="query.shop_category_image" mode="" class="shop_logo"></image>
						<view class="shop_name">
							{{query.shop_name}}
						</view>
					</view>
				</view>
				<view class="row mb">
					<view class="left">
						开卡时间
					</view>
					<view class="right">
						<view class="shop_name">
							{{query.open_date?query.open_date:'-'}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-view">
			<view class="comlum_box">
				<view class="order_box">
					<view class="order_top">
						<view class="title">
							到店情况
						</view>
						<view class="right" @click.stop="$ROUTELINK('storeDeatil?user_id=' + query.user_id)">
							<view class="size">
								查看详情
							</view>
							<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
						</view>
					</view>
					<view class="order_bottom">
						<view class="comlum_d1 width1">
							<view class="d1_title">
								近7日(次)
							</view>
							<view class="d2_number">
								{{query.cross.num7}}
							</view>
						</view>
						<view class="comlum_d1 width2">
							<view class="d1_title">
								近30日(次)
							</view>
							<view class="d2_number">
								{{query.cross.num30}}
							</view>
						</view>
						<view class="comlum_d1 width3">
							<view class="d1_title">
								最近一次
							</view>
							<view class="d2_number">
								{{query.cross.date?query.cross.date:'-'}}
							</view>
						</view>
					</view>
				</view>

				<view class="order_box">
					<view class="order_top">
						<view class="title">
							上课情况
						</view>
						<view class="right" @click.stop="$ROUTELINK('goClass?user_id=' + query.user_id)">
							<view class="size">
								查看详情
							</view>
							<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
						</view>
					</view>
					<view class="order_bottom">
						<view class="comlum_d1 width1">
							<view class="d1_title">
								近7日(次)
							</view>
							<view class="d2_number">
								{{query.class.ynmt7}}
							</view>
						</view>
						<view class="comlum_d1 width2">
							<view class="d1_title">
								近30日(次)
							</view>
							<view class="d2_number">
								{{query.class.ynmt30}}
							</view>
						</view>
						<view class="comlum_d1 width3">
							<view class="d1_title">
								最近一次
							</view>
							<view class="d2_number">
								{{query.class.date?query.class.date:'-'}}
							</view>
						</view>
					</view>
				</view>

				<view class="order_box">
					<view class="order_top">
						<view class="title">
							消费情况
						</view>
						<view class="right">
							<!-- <view class="size">
								查看详情
							</view>
							<u-icon name="arrow-right" color="#999999" size="14"></u-icon> -->
						</view>
					</view>
					<view class="order_bottom">
						<view class="comlum_d1 width1">
							<view class="d1_title">
								总消费(元)
							</view>
							<view class="d2_number">
								{{query.consume}}
							</view>
						</view>
						<view class="comlum_d1 width2">
							<view class="d1_title">
								卡剩余(天)
							</view>
							<view class="d2_number">
								{{query.card_day}}
							</view>
						</view>
						<view class="comlum_d1 width3">
							<view class="d1_title">
								私教课剩余(节)
							</view>
							<view class="d2_number">
								{{query.class_num}}
							</view>
						</view>
					</view>
				</view>

				<view class="card_box">
					<view class="card_Item" @click.stop="$ROUTELINK('card?user_id=' + query.user_id)">
						<image :src="$IMG_URL('/static/test/card.png')" mode="aspectFill" class="logo1"></image>
						<view class="size1">
							卡包
						</view>
						<view class="size2">
							{{query.card_num}}
						</view>
						<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
					</view>
					<view class="card_Item" @click.stop="$ROUTELINK('class?user_id=' + query.user_id)">
						<image :src="$IMG_URL('/static/test/class.png')"  mode="aspectFill" class="logo2"></image>
						<view class="size1">
							课程
						</view>
						<view class="size2">
							{{query.course_num}}
						</view>
						<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
					</view>
					<view class="card_Item" @click.stop="$EXPLOIT()">
						<image  :src="$IMG_URL('/static/test/tice.png')"  mode="aspectFill" class="logo1"></image>
						<view class="size1">
							体测
						</view>
						<view class="size2">
							{{query.fid}}
						</view>
						<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
					</view>
				</view>

				<view class="order_box">
					<view class="order_top">
						<view class="title">
							跟进记录{{query.follow.num?'(近'+ query.follow.num +'次)':''}}
						</view>
						<view class="right" @click="$ROUTELINK('FollowUp_history?user_id=' + query.user_id)">
							<view class="size">
								查看全部
							</view>
							<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
						</view>
					</view>
					<view class="order_bottom1">
						<view v-for="(item,index) in query.follow.list" :key="index" class="Item_deatil"
							:class="(index < query.follow.list.length - 1 ) ? 'mb' : ''">
							<view class="content">
								{{item.content}}
							</view>
							<view class="time">
								{{item.add_date}}
							</view>
						</view>
					</view>

				</view>
				<view class="emptys">

				</view>
			</view>
		</scroll-view>


		<view class="foot">
			<view class="btn" @click="routehistory">
				添加跟进记录
			</view>
		</view>
		<remarkVue :popupShow="popupShow" @cancel="cancel" @sure="sure" :title="'编辑备注'" :placeholder="'请填写备注'"
			:sureStr="'确认'"></remarkVue>
		<deleteVue :telephoneShow="telephoneShow" @cancel="callCancel" @sure="callSure"></deleteVue>
		<u-toast ref="uToast" />
	</view>

</template>

<script>
	import remarkVue from '../components/remark.vue'
	import infomationVue from '../components/infomation.vue'
	import deleteVue from '../../manager/components/delete.vue'
	import empty from '@/components/empty.vue'
	import {
		storeMemberInfo,
		storeMemberRemark,
		delFace
	} from '@/api/coach.js'
	export default {
		components: {
			remarkVue,
			infomationVue,
			deleteVue,
			empty,
		},
		data() {
			return {
				telephoneShow: false,
				popupShow: false,
				contentStr: '',
				query: {
					follow: {
						list: [
							// ... 您的数据项
						]
					}
				},
				infomation: {}
			}
		},
		onLoad(e) {
			this.infomation = e
			this.getstoreMemberInfo(e)
		},
		onShow() {
			this.getstoreMemberInfo(this.infomation)
		},
		methods: {
			openRemark(){
				this.popupShow = true
			},
			routehistory() {
				uni.navigateTo({
					url: 'FollowUp_history?user_id=' + this.query.user_id
				})
			},
			getstoreMemberInfo(e) {
				storeMemberInfo(e).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.query = res.data
					}
				})
			},
			callSure() {
				console.log('12313');
				delFace({
					user_id: this.query.user_id
				}).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
						})
						this.telephoneShow = false
						this.getstoreMemberInfo(this.infomation)
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
				
			},
			callCancel() {
				this.telephoneShow = false
			},
			changDelete() {
				console.log('111');
				this.telephoneShow = true
			},
			cancel() {
				this.popupShow = false
			},
			sure(str) {
				storeMemberRemark({
					user_id: this.infomation.user_id,
					remark: str
				}).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.getstoreMemberInfo(this.infomation)
						this.popupShow = false
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header {
		width: 750rpx;
		// height: 456rpx;
		background: #ffffff;
		padding: 0 48rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 2rpx;

		.top {
			padding: 38rpx 0;
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid #e9e9e9;

			.img {
				width: 96rpx;
				height: 96rpx;
				background: rgba(0, 0, 0, 0.00);
				border-radius: 50%;
				margin-right: 19rpx;
			}

			.comlum_Y {
				display: flex;
				flex-direction: column;
			}

			.first {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 18rpx;

				.name {
					margin-right: 16rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
				}

				.sex {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				.size {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #000000;
				}
			}

			.scound {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;

				.logo {
					width: 20rpx;
					height: 30rpx;
					margin-right: 7rpx;
				}

				.number {
					margin-right: 12rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #666666;
				}

				.call {
					flex: 1;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #73F0EA;
				}
			}
		}

		.bottom {
			border-top: 1rpx solid #e9e9e9;
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 42rpx 0 40rpx;

			.mb {
				margin-bottom: 40rpx;
			}

			.row {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.left {
					width: 160rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #000000;
					display: flex;
					flex-direction: row;
					align-items: center;

					.remark {
						margin-left: 11rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;

					.shop_logo {
						width: 114rpx;
						height: 36rpx;
						margin-right: 12rpx;
					}

					.shop_name {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: right;
						color: #333333;
					}
				}
			}
		}
	}

	.scroll-view {
		height: 58vh;

		.comlum_box {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	.order_box {
		margin-top: 24rpx;
		width: 702rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 0 24rpx;

		.order_top {
			width: 100%;
			height: 86rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid #e9e9e9;

			.title {
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #333333;
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;

				.size {
					margin-right: 7rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: right;
					color: #666666;
				}
			}
		}

		.order_bottom {
			width: 100%;
			display: flex;
			flex-direction: row;
			height: 138rpx;

			.width1 {
				width: 170rpx;
			}

			.width2 {
				width: 184rpx;
			}

			.width3 {
				width: 294rpx;
			}

			.comlum_d1 {
				display: flex;
				flex-direction: column;
				padding-top: 26rpx;

				.d1_title {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #666666;
					margin-bottom: 8rpx;
				}

				.d2_number {
					font-size: 24rpx;
					font-family: DIN, DIN-Bold;
					font-weight: 700;
					color: #000000;
				}
			}
		}

		.order_bottom1 {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 25rpx 0;

			.mb {
				margin-bottom: 32rpx;
			}

			.Item_deatil {
				display: flex;
				flex-direction: column;
				width: 100%;

				.content {
					width: 100%;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #000000;
					margin-bottom: 8rpx;
				}

				.time {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #666666;
				}
			}
		}
	}

	.emptys {
		height: 30rpx;
	}

	.card_box {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		padding: 20rpx 19rpx 0;

		.card_Item {
			width: 224rpx;
			height: 92rpx;
			background: #ffffff;
			border-radius: 16rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 22rpx 0 23rpx;

			.logo1 {
				width: 32rpx;
				height: 34rpx;
			}

			.logo2 {
				width: 32rpx;
				height: 36rpx;
			}

			.size1 {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #000000;
				margin: 0 8rpx 0 14.42rpx;
			}

			.size2 {
				flex: 1;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #666666;
			}
		}

	}

	.foot {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 160rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
		display: flex;
		justify-content: center;
		padding-top: 10rpx;

		.btn {
			width: 710rpx;
			height: 88rpx;
			background: #73F0EA;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>